<template>
  <div class="addDish">
    <div class="leftCont">
      <div v-show="seachKey.trim() == ''"
           class="tabBut"
      >
        <span v-for="(item, index) in medicineType"
              :key="index"
              :class="{ act: index == keyInd }"
              @click="checkTypeHandle(index, item.id)"
        >{{ item.name }}</span>
      </div>
      <div class="tabList">
        <div class="table"
             :class="{ borderNone: !chinesewesternmedicineList.length }"
        >
          <div v-if="chinesewesternmedicineList.length == 0"
               style="padding-left: 10px"
          >
            <Empty />
          </div>
          <el-checkbox-group v-if="chinesewesternmedicineList.length > 0"
                             v-model="checkedList"
                             @change="checkedListHandle"
          >
            <div v-for="(item, index) in chinesewesternmedicineList"
                 :key="item.name + item.id"
                 class="items"
            >
              <el-checkbox :key="index"
                           :label="item.name"
              >
                <div class="item">
                  <span style="flex: 3; text-align: left">{{
                    item.medicineName
                  }}</span>
                  <span>{{ item.status == 0 ? '下架' : '上架' }}</span>
                  <span>{{ (Number(item.price) ).toFixed(2)*100/100 }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="ritCont">
      <div class="tit">
        已选药品({{ checkedListAll.length }})
      </div>
      <div class="items">
        <div v-for="(item, ind) in checkedListAll"
             :key="ind"
             class="item"
        >
          <span>{{ item.medicineName || item.name }}</span>
          <span class="price">￥ {{ (Number(item.price) ).toFixed(2)*100/100 }} </span>
          <span class="del"
                @click="delCheck(item.name)"
          >
            <img src="./../../../assets/icons/btn_clean@2x.png"
                 alt=""
            >
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { ChineseWesternMedicineCategoryList, queryChineseWesternMedicineList } from '@/api/chinese_western_medicine'
import Empty from '@/components/Empty/index.vue'

@Component({
  name: 'selectInput',
  components: {
    Empty
  }
})
export default class extends Vue {
  @Prop({ default: '' }) value
  @Prop({ default: [] }) checkList
  @Prop({ default: '' }) seachKey
  medicineType = []
  chinesewesternmedicineList = []
  allMedicineList = []
  dishListCache = []
  keyInd = 0
  searchValue = ''
  checkedList = []
  checkedListAll = []
  ids = new Set()
  created() {
    this.init()
  }

  @Watch('seachKey')
  seachKeyChange(value) {
    if (value.trim()) {
      this.getDishForName(this.seachKey)
    }
  }

  init() {
    // 药品清单列表数据获取
    this.getMedicineType()
    // 初始化选项
    this.checkedList = this.checkList.map((it) => it.name)
    // 已选项的药品-详细信息
    this.checkedListAll = this.checkList.reverse()
  }
  // 获取组合药分类
  getMedicineType() {
    ChineseWesternMedicineCategoryList({ type: 1 }).then(res => {
      if (res && res.data && res.data.code === 1) {
        this.medicineType = res.data.data
        this.getMedicineList(res.data.data[0].id)
      } else {
        this.$message.error(res.data.msg)
      }
      // if (res.data.code == 200) {
      //   const { data } = res.data
      //   this.   = data
      //   this.getMedicineList(data[0].category_id)
      // } else {
      //   this.$message.error(res.data.desc)
      // }
    })
  }

  // 通过组合药ID获取药品列表分类
  getMedicineList(id) {
    queryChineseWesternMedicineList({ categoryId: id }).then(res => {
      if (res && res.data && res.data.code === 1) {
        if (res.data.data.length == 0) {
          this.chinesewesternmedicineList = []
          return
        }
        let newArr = res.data.data
        newArr.forEach((n) => {
          n.medicineId = n.id
          n.copies = 1
          // n.medicineCopies = 1
          n.medicineName = n.name
        })
        this.chinesewesternmedicineList = newArr
        if (!this.ids.has(id)) {
          this.allMedicineList = [...this.allMedicineList, ...newArr]
        }
        this.ids.add(id)
      } else {
        this.$message.error(res.data.msg)
      }
    })
  }

  // 关键词收搜药品列表分类
  getDishForName(name) {
    queryChineseWesternMedicineList({ name }).then(res => {
      if (res && res.data && res.data.code === 1) {
        let newArr = res.data.data
        newArr.forEach((n) => {
          n.medicineId = n.id
          n.medicineName = n.name
        })
        this.chinesewesternmedicineList = newArr
      } else {
        this.$message.error(res.data.msg)
      }
    })
  }
  // 点击分类
  checkTypeHandle(ind, id) {
    this.keyInd = ind
    this.getMedicineList(id)
  }
  // 添加药品
  checkedListHandle(value) {
    // TODO 实现倒序 由于value是组件内封装无法从前面添加 所有取巧处理倒序添加
    // 倒序展示 - 数据处理前反正 为正序
    this.checkedListAll.reverse()
    // value 是一个只包含药品名的数组 需要从 medicineList中筛选出 对应的详情
    // 操作添加药品
    const list = this.allMedicineList.filter((item) => {
      let data
      value.forEach((it) => {
        if (item.name == it) {
          data = item
        }
      })
      return data
    })
    // 编辑的时候需要与已有药品合并
    // 与当前请求下的选择性 然后去重就是当前的列表
    const medicineListCat = [...this.checkedListAll, ...list]
    let arrData = []
    this.checkedListAll = medicineListCat.filter((item) => {
      let allArrDate
      if (arrData.length == 0) {
        arrData.push(item.name)
        allArrDate = item
      } else {
        const st = arrData.some(it => item.name == it)
        if (!st) {
          arrData.push(item.name)
          allArrDate = item
        }
      }
      return allArrDate
    })
    // 如果是减药品 走这里
    if (value.length < arrData.length) {
      this.checkedListAll = this.checkedListAll.filter((item) => {
        if (value.some(it => it == item.name)) {
          return item
        }
      })
    }
    this.$emit('checkList', this.checkedListAll)
    // 数据处理完反转为倒序
    this.checkedListAll.reverse()
  }

  open(done) {
    this.dishListCache = JSON.parse(JSON.stringify(this.checkList))
  }

  close(done) {
    this.checkList = this.dishListCache
  }

  // 删除
  delCheck(name) {
    const index = this.checkedList.findIndex(it => it === name)
    const indexAll = this.checkedListAll.findIndex(
      (it) => it.name === name
    )

    this.checkedList.splice(index, 1)
    this.checkedListAll.splice(indexAll, 1)
    this.$emit('checkList', this.checkedListAll)
  }
}
</script>
<style lang="scss">
.addDish {
  .el-checkbox__label {
    width: 100%;
  }
  .empty-box {
    margin-top: 50px;
    margin-bottom: 0px;
  }
}
</style>
<style lang="scss" scoped>
.addDish {
  padding: 0 20px;
  display: flex;
  line-height: 40px;
  .empty-box {
    img {
      width: 190px;
      height: 147px;
    }
  }

  .borderNone {
    border: none !important;
  }
  span,
  .tit {
    color: #333;
  }
  .leftCont {
    display: flex;
    border-right: solid 1px #efefef;
    width: 60%;
    padding: 15px;
    .tabBut {
      width: 110px;
      font-weight: bold;
      border-right: solid 2px #f4f4f4;
      span {
        display: block;
        text-align: center;
        // border-right: solid 2px #f4f4f4;
        cursor: pointer;
        position: relative;
      }
    }
    .act {
      border-color: $mine !important;
      color: $mine !important;
    }
    .act::after {
      content: ' ';
      display: inline-block;
      background-color: $mine;
      width: 2px;
      height: 40px;
      position: absolute;
      right: -2px;
    }
    .tabList {
      flex: 1;
      padding: 15px;
      height: 400px;
      overflow-y: scroll;
      .table {
        border: solid 1px #f4f4f4;
        border-bottom: solid 1px #f4f4f4;
        .items {
          border-bottom: solid 1px #f4f4f4;
          padding: 0 10px;
          display: flex;
          .el-checkbox,
          .el-checkbox__label {
            width: 100%;
          }
          .item {
            display: flex;
            padding-right: 20px;
            span {
              display: inline-block;
              text-align: center;
              flex: 1;
              font-weight: normal;
            }
          }
        }
      }
    }
  }
  .ritCont {
    width: 40%;
    .tit {
      margin: 0 15px;
      font-weight: bold;
    }
    .items {
      height: 338px;
      padding: 4px 15px;
      overflow: scroll;
    }
    .item {
      box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.03);
      display: flex;
      text-align: center;
      padding: 0 10px;
      margin-bottom: 20px;
      border-radius: 6px;
      color: #818693;
      span:first-child {
        text-align: left;
        color: #20232a;
        flex: 70%;
      }
      .price {
        display: inline-block;
        flex: 70%;
        text-align: left;
      }
      .del {
        cursor: pointer;
        img {
          position: relative;
          top: 5px;
          width: 20px;
        }
      }
    }
  }
}
</style>
